<template>
    <n-layout class="w-full h-full" position="absolute">
        <n-layout-header class="p10">
            <n-space>
                <n-input :size placeholder="请输入IP地址" v-model:value="bean.ip">
                    <template #prefix><n-tag :bordered type="primary">IP地址</n-tag></template>
                </n-input>
                <n-input :size placeholder="请输入通配符掩码" v-model:value="bean.mask">
                    <template #prefix><n-tag :bordered type="primary">通配符掩码</n-tag></template>
                </n-input>
                <n-button :size type="primary" @click="calc">计算</n-button>
                <n-button :size type="primary" @click="toNote">发送到记事本</n-button>
            </n-space>
        </n-layout-header>
        <n-layout-content position="absolute" content-class="p10"
            :style="{ top: 'var(--header-height)', bottom: 'var(--footer-height)'}">
            <n-card title="匹配以下IP地址" class="h-full" :content-style="{ maxHeight:'calc(100% - 60px)'}">
                <template #header-extra v-if="ips.length">
                    <n-text depth="3" @click="copy()">共匹配 {{ ips.length }} 个IP地址</n-text>
                </template>
                <div class="h-full" style="overflow-y: auto;">
                    <n-flex><n-tag v-for="ip in ips" class="clickable" @click="copy(ip)" :bordered :size>{{ ip }}</n-tag></n-flex>
                </div>
            </n-card>
        </n-layout-content>
        <n-layout-footer position="absolute" style="height:var(--footer-height); padding: 10px;text-align: center;">
            <Footer />
        </n-layout-footer>
    </n-layout>
</template>

<script setup>
    import { invoke } from '@tauri-apps/api/core'
    import { useMessage } from 'naive-ui'

    import Footer from "@W/footer.vue"

    const message = useMessage()
    const bordered  = false
    const size      = "large"

    const bean = reactive({ ip:undefined, mask:undefined })
    let ips = ref([])

    const check = ()=>new Promise(ok=>{
        if(!bean.ip || !bean.mask)
            return message.warning(`IP及通配符掩码必须填写`)
        ok()
    })

    const calc = ()=>check().then(()=>{
        invoke('calculate', bean).then(list=>ips.value=list).catch(e=>message.error(e))
    })
    const copy = ip=> {
        if(!!ip){
            navigator.clipboard.writeText(ip)
            message.success(`⌈${ip}⌋已复制`)
        }
        else{
            navigator.clipboard.writeText(ips.value.join("\n"))
            message.success(`${ips.value.length}个IP地址已复制`)
        }
    }

    const toNote = ()=> check().then(()=> {
        invoke("save_txt", { ip: bean.ip, mask:bean.mask, ips: ips.value }).then(name=>message.success(`操作成功`))
    })
</script>
